<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计算属性和数据监听</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        input {
            padding: 5px;
            margin: 5px 0;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin: 5px 0;
        }
    </style>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>插值表达式</h1>
        <p>a={{ a }}, b={{ b }}, c={{ c }}</p>
        <p>插值表达式计算: {{ a * b + b * c + a * c }}</p>
        <p>计算属性: {{ result }}</p>

        <h1>练习</h1>
        <label for="radius">输入圆的半径:</label>
        <input type="number" id="radius" v-model="r" step="0.01" placeholder="请输入半径" /><br />
        <p>周长是: {{ 2 * 3.1415926 * r }}</p>
        <p>周长是: {{ perimeter }}</p>

        <h1>例子2</h1>
        <label for="firstName">姓:</label>
        <input type="text" id="firstName" v-model="firstName" placeholder="请输入姓" /><br />
        <label for="lastName">名:</label>
        <input type="text" id="lastName" v-model="lastName" placeholder="请输入名" /><br />
        <label for="fullName">姓名:</label>
        <input type="text" id="fullName" v-model.lazy="fullName" placeholder="请输入全名" />

        <h1>例子3 过滤数组</h1>
        <h2>及格学生</h2>
        <ul>
            <li v-for="student in passStudents">
                {{ student.name }}, {{ student.score }}
            </li>
        </ul>
        <hr />
        <h2>不及格学生</h2>
        <ul>
            <li v-for="student in failStudents">
                {{ student.name }}, {{ student.score }}
            </li>
        </ul>
    </div>

    <script>
        var app = Vue.createApp({
            data() {
                return {
                    a: 10,
                    b: 20,
                    c: 30,
                    r: 0,
                    firstName: "",
                    lastName: "",
                    stus: [
                        { name: "张飞", score: 50 },
                        { name: "张三", score: 90 },
                        { name: "张三丰", score: 53 },
                        { name: "李四", score: 99 },
                        { name: "王五", score: 100 }
                    ]
                };
            },
            // 计算属性选项
            computed: {
                passStudents() {
                    return this.stus.filter(student => student.score >= 60);
                },
                failStudents() {
                    return this.stus.filter(student => student.score < 60);
                },
                result() {
                    return this.a * this.b + this.b * this.c + this.a * this.c;
                },
                perimeter() {
                    return 2 * 3.1415926 * this.r;
                },
                fullName: {
                    set(newValue) {
                        newValue = newValue.trim();
                        const names = newValue.split(" ");
                        console.log(names);
                        this.firstName = names[0];
                        this.lastName = names[names.length - 1];
                    },
                    get() {
                        return `${this.firstName} ${this.lastName}`;
                    }
                }
            }
        });
        var vm = app.mount("#app");
    </script>
</body>
</html>